import React, { Component } from 'react';
import {Route,Switch } from 'react-router-dom'
import { Row, Col } from 'antd';
import List from '../../components/List/List';
import styles from './index.module.css'
import UsersRecommend from '../../components/usersRecommend/usersRecommend';
import ExploreNews from '../../components/exploreNews/exploreNews';
import NewsDetail from '../../components/exploreNews/newsDetail/newsDetail';

export default class Explore extends Component {
  render() {
    return (
      <div className={styles.content}>
        <div className={styles.row}> 
        <Row>
          <Col span={7} > <UsersRecommend></UsersRecommend> </Col>
          <Col span={12} >
            <Switch>
              <Route exact path="/explore" component={ExploreNews}></Route>
              <Route  path={"/explore/:newsId"} component={NewsDetail}></Route>
            </Switch>
          </Col>
          <Col span={5}><List /></Col>
        </Row>
        </div>
      </div>
    )
  }
}
